#include("/common/_layout.html")
#@layout()
#define layoutHead()
	<title>权限管理</title>
#end
#define layoutBody()
	<body>
		<div class="page-content-wrap">
					<div class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline">
								<select id="app_id" name="app_id" lay-filter="app_id">
									<option value="">请选择应用</option>
								</select>
							</div>
							<div class="layui-inline">
								<select id="role_id" name="role_id" lay-filter="role_id">
									<option value="">请选择角色</option>
								</select>
							</div>
							<button class="layui-btn layui-btn-normal" id="btn_search">查询</button>
							<button class="layui-btn layui-btn-normal" id="btn_save">保存</button>
						</div>
					</div>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-skin="line">
							<colgroup>
								<col class="hidden-xs" width="50" style="display:none">
								<col class="hidden-xs" width="200">
								<col width="50">
								<col>
								<col width="80">
							</colgroup>
							<thead>
								<tr>
									<th class="hidden-xs" style="display:none">ID</th>
									<th class="hidden-xs">应用</th>
									<th><input type="checkbox" id="allChoose" name="allChoose" lay-skin="primary" lay-filter="allChoose"></th>
									<th>菜单名称</th>
									<th>可见</th>
								</tr>
							</thead>
							<tbody id="listTbody">
							</tbody>
						</table>
					</div>
		</div>
		<!-- #[[ -->
		<script id="tplTbody" type="text/html">
			{{#  layui.each(d.menunode, function(index, item){ }}
					<tr id='node-{{ item.menu_id }}' class="parent collapsed">
						<td class="hidden-xs" style="display:none">{{ item.menu_id }}</td>
						<td class="hidden-xs">{{ item.app_name }}</td>
						<td><input type="checkbox" id=="oneChoose_{{ item.menu_id }}" name="oneChoose_{{ item.menu_id }}" lay-skin="primary" lay-filter="oneChoose" data-id="{{ item.menu_id }}"/></td>
						<td>{{ d.suffix + item.menu_name }}
						</td>
						<td>
							{{# if (item.is_hide === false) { }}
							<button class="layui-btn layui-btn-mini layui-btn-normal table-list-status">显示 </button>
							{{# } }}
							{{# if (item.is_hide === true) { }}
							<button class="layui-btn layui-btn-mini layui-btn-warm table-list-status">隐藏</button>
							{{# } }}
						</td>
					</tr>
			{{#  }); }}
		</script>
		<!-- ]]# -->
		<script type="text/javascript">
		var page_init = true;
		layui.use(['layer', 'laypage', 'laytpl', 'form'], function(){
			var laypage = layui.laypage
			,layer = layui.layer
			,laytpl = layui.laytpl
			,form = layui.form();
			
			$('#btn_search').click(function(){
				getPowerData();
			});
			
			$('#btn_save').click(function(){
				savePower();
			});
			
			function savePower(){
				var iids = "";
				$('input[lay-filter="oneChoose"]').each(function(){
					if ($(this)[0].checked){
						iids += $(this).attr("data-id") + ",";
					}
				});
				sendPost("/api/permission/save", {
						app_id: $('#app_id').val(), 
						role_id: $('#role_id').val(), 
						ids: iids,
					}, function(res){
						//console.log(res);
						layer.alert(res.msg, {
							title: '信息提示'
						});
				});
			}
			
			function getPageInit(){
				sendPost("/api/permission/getInit", null, function(res){
						//console.log(res);
						bindSelectJSONProps("app_id", res, "listapp", "app_name", "app_id", 1);
						bindSelectJSONProps("role_id", res, "listrole", "role_name", "role_id", 1);
						form.render('select');//需要渲染一下
				});
			}
			
			// get page data
			function getPowerData(){
				document.getElementById('listTbody').innerHTML = "";
				$('#allChoose').prop("checked", false);
				var surl = "/api/permission/getPower?so_app_id="+$('#app_id').val() + "&role_id="+$('#role_id').val();
				sendPost(surl, null, function(res){
						//console.log(res);						
						if (res.hasOwnProperty("listmenu")){
							filterListMenu(res.listmenu, 0, 0);
						}						
						if (res.hasOwnProperty("listpower")){
							for(var i=0;i<res.listpower.length;i++){
								$("input[data-id="+res.listpower[i].menu_id+"]").prop("checked", true);
							}
						}
						form.render();
				});
			}
			
			function filterListMenu(listmenu, pid, level){
				//筛选
				var menu_node1 = listmenu.filter(function (e) { return e.parent_id == pid; });
				//遍历结果对象
				for (var i = 0; i < menu_node1.length; i++) {
						//alert(menu_node1[i].menuname);
						var shtml = "";
						if (level>0){
							for(j=0;j<level;j++){
								shtml += '&nbsp;&nbsp;&nbsp;&nbsp;';
							}
							shtml += '├─';
						}
						shtml += menu_node1[i].menu_sort + ". ";
						var row = {menunode: [], suffix: shtml} ;
						row.menunode.push(menu_node1[i]);
						// 渲染
						renderTable(row);
						// 迭代
						filterListMenu(listmenu, menu_node1[i].menu_id, level+1);
				}
			}

			// render table
			function renderTable(listData){
				var getTpl = document.getElementById('tplTbody').innerHTML;
				laytpl(getTpl).render(listData, function(html){
					document.getElementById('listTbody').innerHTML += html;
				});
			}
			
			// 初始化
			getPageInit();
		});

		
		</script>
	</body>

#end